<template>
  <div>
    <el-upload
      :action="API + 'uploadVideo'"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :headers="{ Authorization: $store.state.token }"
    >
      <el-button size="small" type="primary">{{ $t("btn.upload") }}</el-button>
    </el-upload>
    <div class="videoBox">
      <div class="video" v-for="(item, index) in videos" :key="index">
        <video controls width="150">
          <source :src="API + item.path" type="video/mp4" />
          Download the
          <a :href="API + item.path">MP4</a>
          video.
        </video>
        <span class="del" @click="del(index)">X</span>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { getVideo, delVideo } from "@/api";
let API = process.env.VUE_APP_API;
export default {
  data() {
    return {
      API,
      videos: [],
    };
  },
  methods: {
    async del(index) {
      let file = this.videos[index].path;
      let { data } = await delVideo({ file });
      console.log(data);
      let { code, message } = data;
      if (code === 20000) {
        this.$message({
          message,
          type: "success",
        });
        this.loadVideo();
      }
    },
    handleAvatarSuccess(res, file) {
      //   console.log(file);
      this.loadVideo();
    },
    beforeAvatarUpload(file) {
      const isMP4 = file.type === "video/mp4";
      if (!isMP4) {
        this.$message.error("上传的视频只能是mp4格式!");
      }
      return isMP4;
    },
    async loadVideo() {
      let { data } = await getVideo();
      let { result } = data;
      this.videos = result;
    },
  },
  async mounted() {
    this.loadVideo();
  },
};
</script>
  
  <style lang="scss" scoped>
.videoBox {
  display: flex;

  .video {
    margin: 10px;
    position: relative;
    .del {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: #ccc;
      border-radius: 10px;
      position: absolute;
      top: -8px;
      right: -8px;
      text-align: center;
      z-index: 10;
    }
  }
}
</style>